<template>
  <div>
    <div>
      <van-nav-bar
          title="添加银行卡"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div style="margin-top: 10px">
      <van-field
          style="height: 50px"
          center
          readonly
          clickable
          is-link
          name="nation"
          :value="nationvalue"
          placeholder="国家"
          @click="shownation = true"
      />
      <van-popup v-model="shownation" position="bottom">
        <van-picker
            show-toolbar
            :columns="columnsnation"
            @confirm="onConfirmnation"
            @cancel="shownation = false"
        />
      </van-popup>
      <van-cell :title="userMsg.name" style="text-align: left;height: 50px" center  size="large" />
      <van-cell-group style="height: 50px" center>
        <van-field v-model="bankcard" placeholder="请输入银行卡号" @change="bankCardChange"/>
      </van-cell-group>
      <van-cell title="开户银行" style="text-align: left;height: 50px" :value="bankName" center  size="large" />
<!--      <van-field-->
<!--          style="height: 50px"-->
<!--          center-->
<!--          readonly-->
<!--          clickable-->
<!--          is-link-->
<!--          name="bank"-->
<!--          :value="bankvalue"-->
<!--          placeholder="开户银行"-->
<!--          @click="showbank = true"-->
<!--      />-->
      <van-popup v-model="showbank" position="bottom">
        <van-picker
            show-toolbar
            @confirm="onConfirmbank"
            @cancel="showbank = false"
        />
      </van-popup>
    </div>
    <div class="hint">
      <span>为了您的资金账号安全，您绑定的银行卡开户人必须跟实名认证信息一致!</span>
    </div>
    <div>
      <van-button type="info" round  size="large" style="width: 90%" @click="goverification">下一步</van-button>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import axios from "axios";
import getBankcardinfo from 'bankcardinfo'
Vue.prototype.$getBankcardinfo = getBankcardinfo
export default {
  data() {
    return {
      columnsnation: ['中国', '美国', '法国'],
      showbank: false,
      shownation: false,
      userMsg:{},
      bankcard:'',
      nationvalue: '',
      bankvalue: '',
      bankMsg:{},
      bankName:'',
      boo:true
    };
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    if(parse!=null){
      this.userMsg=parse
    }
  },
  methods: {
    // 判断银行卡号所属银行和是否符合规则
    bankCardChange(){
      let validateBankCard = /^([1-9]{1})(\d{14}|\d{18})$/;
      if(!validateBankCard.test(this.bankcard)){
        this.$toast('银行卡号不合法');
        this.boo=false
      }else{
        this.boo=true
        this.$getBankcardinfo.getBankBin(this.bankcard, (err, data) => {
          if (!err) {
            console.log("银行卡信息",data)
            this.bankName=data.bankName
          }
        })
      }
    },
    onClickLeft() {
      this.$router.push({
        path: '/bankcard'
      })
    },
    onConfirmnation(value) {
      this.nationvalue = value;
      this.shownation = false;
    },
    onConfirmbank(value) {
      this.bankvalue = value;
      this.showbank = false;
    },
    goverification(){
      if(this.boo){
        this.bankMsg.pid=this.userMsg.registerIp
        this.bankMsg.country=this.nationvalue
        this.bankMsg.bank=this.bankName
        this.bankMsg.bankCardNum=this.bankcard
        this.bankMsg.accountPeople=this.userMsg.name
        // if(this.bankMsg.country==null||this.bankMsg.country==''){
        //   this.$toast('请选择国家');
        // }else if(this.bankMsg.bank==null||this.bankMsg.bank==''){
        //   this.$toast('请选择开户银行');
        // }else
        if(this.bankMsg.bankCardNum==null||this.bankMsg.bankCardNum==''){
          this.$toast('请输入银行卡号');
        }else{
          this.$router.push({
            path: '/verification',
            query:{
              country:this.bankMsg.country,
              bank:this.bankMsg.bank,
              bankCardNum:this.bankMsg.bankCardNum,
            }
          })
        }
      }else{
        this.$toast('银行卡号不合法');
      }
    },
  }
}
</script>

<style scoped>
.hint{
  margin: 15px;
}
.hint span{
  display:inline-block;
  text-align: left;
  font-size: 12px;
  color: #9ca1a7;
}
</style>
